<template>
  <div class="demo-collapse">
    <el-collapse accordion>
      <el-collapse-item v-for="i in title" :key="i" @title="i.title">
        <template #title
          >{{ i.titleName }}

          <div style="float: right; position: relative">
            <el-tag size="small">{{ i.titleTags }}</el-tag>
          </div>

          <div style="position: relative; padding-left: 4rem">
            <el-link type="primary" @click="showEssay(i.titleId)"
              >详细文章</el-link
            >
          </div>
        </template>

        <div v-if="i.titleDesc != null">简介: {{ i.titleDesc }}</div>
        <div v-else>
          {{ i.titleContent }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup>

import { computed, onMounted, reactive, ref, VueElement } from 'vue-demi'
import Mock from 'mockjs'
import { getAllByType } from '@/api/title'
import { timePickerDefaultProps } from 'element-plus'
import { useRouter } from 'vue-router'
const { createApp } = VueElement
const router = useRouter()

function showEssay (id) {
  router.push({ query: { essayId: id }, path: '/essay' })

}

let title = ref([])
const getTitle = onMounted(() => {

  getAllByType(type).then((res) => {

    title.value = res.data
    return title
  })
})
const type = "line"
const test = Mock.mock({
  'list|1-10': [{
    'id|+1': 1
  }]
})










</script>

<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;

  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.demo-collapse {
  padding-left: 5.5rem;
}
</style>